<template>
  <div>
    <HeaderSelector></HeaderSelector>
    <div class="maincontent">
      <h1 class="headTitle">匿名广场</h1>
      <div class="buttonM">
        <el-button type="primary" @click="dialogVisible = true" round>发起提问</el-button>

      </div>

      <el-dialog title="我要提问" :visible.sync="dialogVisible">
        <el-form :model="question">
          <el-form-item>
            <el-input v-model="question.question" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subQues">确 定</el-button>
        </div>
      </el-dialog>


      <div class="button">
        <el-button round @click="mostnew">最新问题</el-button>
        <el-button round @click="mostold">最久问题</el-button>
        <el-button round @click="mostanswers">最多回答数</el-button>
      </div>
      <br>
      <div v-for="question in questions">
        <el-card shadow="hover" class="question">
          <el-row>
            <el-col :span="18">
              {{ question.created }}
            </el-col>
            <el-col :span="6" class="answercount">
              <el-button type="primary" plain size="small">回答数:{{ question.answerCount }}</el-button>
            </el-col>
          </el-row>
          <br>
          <div class="mainquestion">
            {{ question.question }}
          </div>
          <el-divider></el-divider>

          <!--回答-->
          <el-card shadow="hover" v-for="answer in question.answers" class="answer">
            <el-row>
              <el-col :span="18">
                {{ answer.created }}
              </el-col>
            </el-row>
            <br>
            <div class="mainquestion">
              {{ answer.answer }}
            </div>
          </el-card>
          <br>
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="textarea">
          </el-input>
          <br>
          <br>
          <div class="answerbutton">
            <el-button type="primary" plain size="small" @click="answerQ(question.qid)">回答</el-button>
          </div>
        </el-card>
        <br>
      </div>

    </div>
  </div>
</template>

<script>
import HeaderSelector from "../components/HeaderSelector";

export default {
  inject: ["reload"],
  name: "Grounds",
  components: {HeaderSelector},

  data() {
    return {
      questions: [],

      textarea: '',

      dialogVisible: false,

      question: {
        question: '',
      },
    }
  },

  methods: {

    subQues() {
      this.$axios.post("/addQues", this.question).then(res => {
        this.dialogVisible = false
        this.$message("提问成功")
        this.reload()
      })

    },

    mostnew() {
      this.$axios.get('/getQues').then(res => {
        this.questions = res.data.data
      })
    },

    mostold() {
      this.$axios.get('/getQuesOld').then(res => {
        this.questions = res.data.data
      })
    },
    mostanswers() {
      this.$axios.get('/getQuesMostAnswers').then(res => {
        this.questions = res.data.data
      })
    },

    answerQ(qid) {
      this.$axios.post('/addAnswer?qid=' + qid, {answer: this.textarea}, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        // this.$router.go(-1);
        this.$message({type: "success", message: "回复成功"})
        //这里没办法。。。
        this.reload();
      })
    }
  },

  created() {
    //展示问题
    this.$axios.get('/getQues').then(res => {
      this.questions = res.data.data
      //其中回答已经嵌入到 问题中
    })

  }
}
</script>

<style scoped>
.maincontent {
  position: relative;
  top: 50px;
}

.question {
  width: 50%;
  margin: auto;
  /*text-align: center;*/
  background-color: rgba(240, 247, 250, 0.5);
}

.answercount {
  text-align: right;
  position: relative;
  bottom: 10px;
}

.mainquestion {
  font-weight: bold;
  color: #00B7FF;
}

.answer {
  /*width: 100%;*/
  position: relative;
  left: 100px;
  margin: auto;
  height: 80%;
  background-color: rgba(240, 247, 250,1);
}

.answerbutton {
  text-align: right;
  margin: auto;
}

.button {
  position: relative;
  margin: auto;
  text-align: center;
}

.headTitle {
  color: #409EFF;
}

.buttonM {
  position: relative;
  margin: auto;
  text-align: center;
  bottom: 10px;
  right: 5px;
}

</style>